@import "[default].parameters.css";
@import "[default].typography.css";

.btn {
    color: var(--color-text-base);
    font-family: "CeraPro", sans-serif;
    font-size: var(--text-body-base) !important;
    font-weight: var(--font-weight-medium) !important;
    border-radius: 0;
    padding: var(--button-padding-y) var(--button-padding-x);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--color-text-base);
    text-underline-offset: var(--text-underline-offset-fw-medium);
    text-underline-position: from-font;
    text-align: center;
    width: fit-content;
    border: none;
}
    /*.btn div {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--display-insets-md);
    }

    .btn span {
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-color: var(--color-text-base);
        text-underline-offset: var(--text-underline-offset-fw-medium);
        text-underline-position: from-font;
    }*/

    .btn i, .btn img {
        text-decoration-line: none;
        width: var(--text-body-base);
        height: var(--text-body-base);
    }

.btn-large {
    font-size: var(--text-body-large) !important;
    padding: var(--button-large-padding-y) var(--button-large-padding-x) !important;
}

    .btn-large i, .btn-large img {
        width: var(--text-body-large);
        height: var(--text-body-large);
    }


.btn-primary {
    background-color: var(--color-background-button-primary) !important;
    color: var(--color-text-inverse) !important;
    text-decoration-color: var(--color-text-inverse) !important;
    border: none !important;
}
/*.btn-primary span {
        text-decoration-color: var(--color-text-inverse) !important;
    }*/

.btn-light {
    background-color: var(--color-background-button-light) !important;
}

.btn-dark-outline {
    border: 1px solid var(--color-border-button-dark-outline) !important;
}

.btn-dark {
    background-color: var(--color-background-button-dark) !important;
    color: var(--color-text-inverse);
    text-decoration-color: var(--color-text-inverse) !important;
}
/*.btn-dark span {
        text-decoration-color: var(--color-text-inverse) !important;
    }*/

.btn-modal-close {
    background-color: transparent !important;
    border: none;
    text-decoration: none;
}

    .btn-modal-close::before {
        content: "\f057"; /* fa-regular fa-circle-xmark */
        font-family: var(--font-family-font-awesome);
        font-size: var(--size-32px);
        font-weight: var(--font-weight-light);
    }

.dropdown-shortcut button {
    font-family: "Global User Interface", sans-serif;
    font-weight: var(--font-weight-regular);
    text-decoration: none;
    color: var(--color-text-muted);
    background-color: var(--color-background-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--display-corner-radius-xs);
}



/* Hover/success effect */

.btn-primary:hover, .btn-dark:hover,
.btn-primary:focus, .btn-dark:focus {
    background-color: var(--color-background-button-primary-hover) !important;
    color: var(--color-text-inverse) !important;
    text-decoration-color: var(--color-text-inverse) !important;
    border: none !important;
}
/*.btn-primary:hover span, .btn-dark:hover span,
    .btn-primary:focus span, .btn-dark:focus span {
        text-decoration-color: var(--color-text-inverse) !important;
    }*/

.btn-light:hover,
.btn-light:focus {
    background-color: var(--color-background-button-light-hover) !important;
    color: var(--color-text-base) !important;
    text-decoration-color: var(--color-text-base) !important;
}
/*.btn-light:hover span,
    .btn-light:focus span {
        text-decoration-color: var(--color-text-base) !important;
    }*/

.btn-dark-outline:hover,
.btn-dark-outline:focus {
    background-color: var(--color-background-button-dark) !important;
    color: var(--color-text-inverse) !important;
    text-decoration-color: var(--color-text-inverse) !important;
}
/*.btn-dark-outline:hover span,
    .btn-dark-outline:focus span {
        text-decoration-color: var(--color-text-inverse) !important;
    }*/